<template>
  <page-layout>
    <template v-slot:header>
      <el-select v-model="query.shop_id" placeholder="请选择" clearable size="small">
        <el-option
          v-for="item in shopName"
          :key="item.shop_id"
          :label="item.shop_name"
          :value="item.shop_id"
        >
        </el-option>
      </el-select>
      <!-- <el-input v-model="query.shop_name"></el-input> -->
      <el-button size="small" type="primary" @click="searchEvt(shopId)">查询</el-button>
      <el-button size="small" type="primary"
        >新增--对选择的门店进行新增</el-button
      >
    </template>

    <el-table :data="tableData" style="width: 100%" height="100%">
      <el-table-column
        prop="shelves_id"
        label="货架编码"
        width="120"
        fixed="left"
      ></el-table-column>
      <el-table-column
        prop="shelves_name"
        label="货架名字"
        width="180"
        fixed="left"
      >
      </el-table-column>
      <el-table-column prop="shop_name" label="所属门店" width="180">
      </el-table-column>
      <el-table-column prop="layers" label="货架层数" width="180">
      </el-table-column>
      <el-table-column prop="positions" label="每层位置" width="180">
      </el-table-column>
      <el-table-column prop="remark" label="备注" width="180">
      </el-table-column>
      <el-table-column label="操作" width="180" fixed="right">
        <el-button type="text" size="small">编辑</el-button>
        <el-button type="text" size="small">拷贝</el-button>
      </el-table-column>
    </el-table>
  </page-layout>
</template>
<script>
import { shelvesListApi, shopListApi } from "@/apis/shopApi";

export default {
  data() {
    return {
      
      tableData: [],
      shopName: [],
      query:{
        page:1,
        size:'100',
        shop_id:''
      }
    };
  },
  async mounted() {
    this.getShelvesList();
    this.getShopName();
  },
  methods: {
    // 获取货架列表
    async getShelvesList() {
      let result = await shelvesListApi(this.query);
      console.log(result)
      if(result.code===200){
        this.tableData = result.data.rows;
      }
      
    },
    //获取门店名称
    async getShopName() {
      let d = await shopListApi();
      if (d.code === 200) {
        this.shopName = d.data.rows
        // console.log(this.shopName)
      }
    },
    //搜索门店
  async searchEvt(){
    this.query.shop_id
    this.getShelvesList()
  }
     
  },
};
</script>
